<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>count:{{count}}</p>
        <p>
            <button @click="addCount">count++</button>
            <button @click="count++">count++</button>
        </p>
        <hr>
        <p>
            {{zhang.name}}----{{zhang.age}}----{{zhang.info.height}}----{{zhang.info.weight}}
        </p>
        <p>
            <button @click="changeName">changeName</button>
            <button @click="changeAge">changeAge</button>
            <button @click="changeHeight">changeHeight</button>
        </p>
    </div>
</body>
<script>

    // 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题

    let {createApp} = Vue;
    let {ref,reactive,readonly} = Vue;


    let app = createApp({
        setup(props) {

            // ref()  => 创建一个对"值类型"数据的引用,返回一个ref对象 (存 对象类型 也可以, 可以通过.value获取修改对象)
            // 注意:
            // 1. setup函数中对ref对象取值和赋值 依赖于.value属性
            // 2. 代理对象中 / template中 ref对象会被解包 => 直接使用变量即可
            // 3. ref() 也可以存对象类型, 此时Vue响应式对ref数据的数据拦截是深层的(可以检测value值是否改变,也可以检测子对象上属性是否改变 => 触发视图更新)


            // reactive()  创建一个对'对象'数据的引用 返回一个对象的响应式代理。(只能获取修改代理对象的子属性)
            // Vue响应式检测reactive()创建的响应式代理数据时是深层的(可以检测根对象及其子对象的属性改变)


            // readonly()​
            // 接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。(只能取值,不能赋值)
            // 

            var count = ref(10); // {value:10}
            console.log("count",count);
            
            count = readonly(count);  // 接收一个ref对象(对象数据),返回只读代理
            console.log("count",count);

            

            var zhang = reactive({name:"张三",age:18,info:{height:177,weight:70}});
            console.log("zhang",zhang);

            zhang = readonly(zhang);  // 接收一个reactive响应式代理对象(对象数据),返回只读代理
            console.log("zhang",zhang);
     


            let addCount = ()=>{
                console.log("addCount执行了",count.value);
                count.value ++;
            }
            

            let changeName = ()=>{
                zhang.name = "李四"
            }
            
            let changeAge = ()=>{
                zhang.age ++
            }

            let changeHeight = ()=>{
                zhang.info.height ++
            }
           
            return {
                count,
                addCount,
                zhang,
                changeName,
                changeAge,
                changeHeight,
            }
        },
        mounted() {
            console.log("代理对象,this",this);

           /*  new Proxy({},{
                get(){
                    // 判断是否是ref对象  => ref.value
                },
                set(){
                    // 判断是否是ref对象   => ref.value = xxx
                }
            }) */
        },
    })


    app.mount("#app");


</script>

</html>